import React, { Component } from 'react'
import { Card, Button, Modal } from 'antd'
import './ui.less'
export default class Modals extends Component {
  state = {
    visible1: false,
    visible2: false,
    visible3: false,
    visible4: false
  }
  openModal = type => {
    this.setState({
      [type]: true
    })
  }
  render() {
    return (
      <div>
        <Card title="基础模态框" className="card-wrap">
          <Button
            className="btn-margin"
            onClick={() => {
              this.openModal('visible1')
            }}
            type="primary"
          >
            Open
          </Button>
          <Button
            className="btn-margin"
            onClick={() => {
              this.openModal('visible2')
            }}
            type="primary"
          >
            自定义页脚
          </Button>
          <Button
            className="btn-margin"
            onClick={() => {
              this.openModal('visible3')
            }}
            type="primary"
          >
            顶部20px弹框
          </Button>
          <Button
            className="btn-margin"
            onClick={() => {
              this.openModal('visible4')
            }}
            type="primary"
          >
            水平垂直居中
          </Button>
        </Card>

        <Card title="信息确认框" className="card-wrap">
          <Button
            className="btn-margin"
            onClick={() => {
              Modal.confirm({
                title:'确认?',
                content:'你确定你学会React了吗？'

              })
            }}
            type="primary"
          >
            Confirm
          </Button>
          <Button
            className="btn-margin"
            onClick={() => {
              Modal.info({
                title:'确认?',
                content:'你确定你学会React了吗？'
              })
            }}
            type="primary"
          >
            info
          </Button>
          <Button
            className="btn-margin"
            onClick={() => {
              Modal.success({
                title:'确认?',
                content:'你确定你学会React了吗？'
              })
            }}
            type="primary"
          >
            success
          </Button>
          <Button
            className="btn-margin"
            onClick={() => {
              Modal.error({
                title:'确认?',
                content:'你确定你学会React了吗？'
              })
            }}
            type="primary"
          >
            error
          </Button>
          <Button
            className="btn-margin"
            onClick={() => {
              Modal.warning({
                title:'确认?',
                content:'你确定你学会React了吗？'
              })
            }}
            type="primary"
          >
            warning
          </Button>
        </Card>
        <Modal
          title="提示"
          visible={this.state.visible1}
          onCancel={() => {
            this.setState({ visible1: false })
          }}
        >
          你今天学了React了吗？
        </Modal>
        <Modal
          title="提示"
          visible={this.state.visible3}
          onCancel={() => {
            this.setState({ visible3: false })
          }}
          style={{top:20}}
        >
          你今天学了React了吗？
        </Modal>
        <Modal
          title="提示"
          visible={this.state.visible4}
          onCancel={() => {
            this.setState({ visible4: false })
          }}
          centered
        >
          你今天学了React了吗？
        </Modal>
      </div>
    )
  }
}
